<template>
  <div class="shopSetting-container">
    <XmCardHeader title="基础设置"></XmCardHeader>
    <section class="page-content">
      <el-form label-position="left" :model="form" width="800px">
        <el-form-item label="重量运费规则:">
          <div class="formItemClass">
            <el-input
              v-model="form.postageObj.baseWeight"
              v-number:2
            ></el-input>
            <span>kg内,</span>
            <el-input v-model="form.postageObj.basePrice" v-number:2></el-input>
            <span>元。每增加</span>
            <el-input
              v-model="form.postageObj.iterationWeight"
              v-number:2
            ></el-input>
            <span>kg,运费增加</span>
            <el-input
              v-model="form.postageObj.iterationPrice"
              v-number:2
            ></el-input>
            <span>元</span>
          </div>
        </el-form-item>
        <el-form-item label="自动收货时间:">
          <div class="formItemClass">
            <el-input
              v-number
              v-model="form.postageObj.receiveTimeout"
              placeholder="请输入整数天"
            ></el-input>
            <span>天</span>
          </div>
        </el-form-item>
      </el-form>
    </section>
    <section class="foot">
      <el-button type="primary" @click="toSave">保存</el-button>
      <el-button @click="toBack">取消</el-button>
    </section>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, watch } from 'vue'
  import { getPostageInfo, savePostageInfo } from '@/api/modules/shop'
  import { usePromise } from '@/hooks/core/usePromise'
  import { onMountedOrActivated } from '@/hooks/core/onMountedOrActivated'
  import common from '@/utils/common'
  import { useRouter } from 'vue-router'
  import { throttle } from 'lodash'
  const form = reactive({
    postageObj: {
      baseWeight: 0,
      basePrice: 0,
      iterationWeight: 0,
      iterationPrice: 0,
      receiveTimeout: 7,
    },
  })

  onMountedOrActivated(() => {
    loadData()
  })

  watch(
    () => form.postageObj,
    () => {
      throttle(() => {
        // save()
      }, 500)
    },
    { deep: true }
  )
  const { to } = usePromise()
  async function loadData() {
    common.XmLoading(true)
    const [err, res] = await to(getPostageInfo())
    common.XmLoading()
    if (!err) {
      form.postageObj.baseWeight = res.data.firstWeight / 100
      form.postageObj.basePrice = res.data.firstWeightCost / 100
      form.postageObj.iterationPrice = res.data.additionalWeightCost / 100
      form.postageObj.iterationWeight = res.data.additionalWeight / 100
      // 收货超时时间
      form.postageObj.receiveTimeout = res.data.receiveTimeout
    }
  }

  async function toSave() {
    if (
      form.postageObj.baseWeight + '' === '0' ||
      form.postageObj.iterationWeight + '' === '0'
    ) {
      common.XmMessage(1, '首重或者追加重量不能为0')
      return
    }
    if (form.postageObj.receiveTimeout + '' === '0') {
      common.XmMessage(1, '自动收货时间不能为0')
      return
    }
    const tmp = {
      firstWeight: 0,
      firstWeightCost: 0,
      additionalWeightCost: 0,
      additionalWeight: 0,
      receiveTimeout: 0,
    }
    tmp.firstWeight = form.postageObj.baseWeight * 100
    tmp.firstWeightCost = form.postageObj.basePrice * 100
    tmp.additionalWeightCost = form.postageObj.iterationPrice * 100
    tmp.additionalWeight = form.postageObj.iterationWeight * 100
    tmp.receiveTimeout = form.postageObj.receiveTimeout
    common.XmLoading(true)
    const [err, res] = await to(savePostageInfo(tmp))
    common.XmLoading()
    common.XmMessage(0, '保存成功')
    if (err) {
      loadData()
    } else {
      toBack()
    }
  }

  const router = useRouter()
  function toBack() {
    router.go(-1)
  }
</script>
<style lang="scss" scoped>
  .shopSetting-container {
    margin: 22px;
    background-color: white;
    padding: 22px;
    .formItemClass {
      // display: flex;
      // display: inline-block;
      .el-input {
        // display: inline-block;
        width: 100px;
      }
    }
    .page-content {
      display: flex;
      justify-content: center;
    }
    .foot {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
